<template>
	<view class="invitation">
		<!-- 动态背景 -->
		<view class="background"></view>

		<!-- 主内容 -->
		<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
			<view class="content-wrapper">
				<view class="header">
					<view class="title">
						<text class="main-title">{{name}}</text>
					</view>
					<br />
					<text class="subtitle">{{title}}</text>
				</view>

				<view class="body">
					<text class="message">{{content}}</text>
					<!-- 				<text class="message">尊敬的用户</text>
				<text class="message">友星缘诚邀您加入我们</text>
				<text class="message">与我们一起分享精彩瞬间</text> -->
				</view>

				<view class="footer">
					<button class="rsvp-button" @click="rsvp">立即进入</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getRegeoData
	} from '@/common/locationUtils.js';
	export default {
		data() {
			return {
				shareCode: null,
				groupId: null,
				shareGroupCode: null,
				name: "尊贵邀请函",
				title: "万业互联 · 人人事事通",
				content: "尊敬的用户,友星缘诚邀您加入我们,与我们一起分享精彩瞬间。",
				groupType: 0,
			}
		},
		methods: {
			rsvp() {
				if (this.shareCode) {
					uni.navigateTo({
						url: `/pageSubOne/mine/mine-share-user?shareCode=${this.shareCode}&from=true`
					})
				} else if (this.groupId) {

					// 查询是否已在群里
					let group = this.groupStore.findGroup(this.groupId);

					if (group != null) {
						this.chatStore.openChatRedirect(this.chatStore.chatType.GROUP, this.groupId, {
							sourceType: group.groupType === 2 ? 0 : 1
						});
					} else {
						// 如果未加群 就加入群聊
						this.addGroup()
					}


				} else {
					uni.showToast({
						title: '已收到您的尊贵确认',
						icon: 'none'
					});
				}
			},


			addGroup() {
				this.$http({
					url: `/group/findGroupById/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.groupType = group.groupType;
					//添加官方群
					if (this.groupType == 2) {
						this.$http({
							url: "/group/addGroupMemberByGroupId",
							method: "POST",
							data: {
								groupId: this.groupId,
								ids: [this.userStore.userInfo.id]
							}
						}).then(() => {
							this.groupStore.loadGroup()

							setTimeout(() => {
								this.chatStore.openChatRedirect(this.chatStore.chatType.GROUP, this
									.groupId, {
										sourceType: 0
									});
							}, 1000)
						})

					} else {
						this.$http({
							url: "/group/applyGroupById",
							method: "POST",
							data: {
								groupId: this.groupId,
								userId: this.userStore.userInfo.id
							}
						}).then(() => {

							this.groupStore.loadGroup()
							setTimeout(() => {
								this.chatStore.openChatRedirect(this.chatStore.chatType.GROUP,
									this.groupId, {
										sourceType: 1
									});
							}, 1000)

						});
					}
				});
			},
			getInvitation() {
				let data = {
					shareCode: this.shareGroupCode,
					groupId: this.groupId
				}
				this.$http({
					url: "/share/saveInviationShare",
					method: "POST",
					data: data
				}).then(res => {

				})
			},
			getData() {
				this.$http({
					url: "/inviation/get?groupId=" + this.groupId,
					method: "GET",
				}).then((res) => {
					this.name = res.name
					this.title = res.title,
						this.content = res.content
				})
			},
			anonymousLogin() {
				// 用户匿名注册之后 弹出
				this.$http({
					url: '/anonymousRegister',
					method: 'POST'
				}).then(res => {
					// 匿名登录之后 把token放到storage里
					uni.setStorageSync("loginInfo", res.token);


					const userName = res.userinfo.userName
					const password = res.userinfo.password
					uni.setStorageSync("userName", userName);
					uni.setStorageSync("password", password);
					
					if (this.groupId) {
						this.getData()
						this.getInvitation()
					}

					getRegeoData().then(regionData => {
						console.log(regionData)
						this.$http({
							url: '/group/joinOfficialGroupByCode',
							data: regionData,
							method: 'POST'
						}).then(res => {
							setTimeout(() => {
								this.userStore.loadUser()
							}, 1000)
							getApp().$vm.init()
						})
					})
				});
			},
		},
		onLoad(options) {
			this.shareCode = options.shareCode
			this.groupId = options.id
			this.shareGroupCode = options.shareGroupCode
			const loginInfo = uni.getStorageSync("loginInfo")
			// #ifndef APP-PLUS
			if (!Boolean(loginInfo)) {
				console.log('调用匿名注册方法')
				this.anonymousLogin()
			} else {
				if (this.groupId) {
					this.getData()
					this.getInvitation()
				}
			}
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	:root {
		--primary-color: #2970FF;
		/* 主色调 */
		--secondary-color: #1E5AC5;
		/* 辅助色 */
		--accent-color: #FFD700;
		/* 强调色 */
		--dark-bg: #1A2A4A;
		/* 深色背景 */
	}

	.invitation {
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	/* 动态科技背景 */
	.background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg,
				#d90000 0%,
				/* 深红色 */
				#ff0000 50%,
				/* 火红色 */
				#e6143e 100%
				/* 深粉色，与深红形成对比 */
			);
		z-index: -1;
	}


	.background::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at 50% 50%,
				rgba(255, 255, 255, 0.05) 0%,
				rgba(255, 255, 255, 0) 60%);
		animation: techPulse 8s ease-in-out infinite;
	}

	.scroll-bar {
		flex: 1;
		height: 100%;
	}

	/* 主内容样式 */
	.content-wrapper {
		position: relative;
		max-width: 900rpx;
		margin: 0 auto;
		padding: 24vh 60rpx 5vh 60rpx;
		text-align: center;
		color: #ffffff;
		transform-style: preserve-3d;


	}

	.header {
		margin-bottom: 80rpx;
	}

	.main-title {
		font-size: 80rpx;
		font-weight: 900;
		/* background: linear-gradient(135deg, #FFD700 20%, #FFA500 80%); */
		color: rgba(255, 255, 255, 0.2);
		background: #FFD700 linear-gradient(to left,
				transparent 0%,
				rgba(252, 252, 252, 0.7) 50%,
				/* 降低白光透明度 */
				transparent 100%) no-repeat 0 0;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		/* background-position: -600px 0; */
		/* color: transparent; */
		/* text-shadow: 0 10rpx 40rpx rgba(222, 0, 3, 0.6); */
		letter-spacing: 4rpx;
		animation: glowEffect 3s infinite;
	}

	@keyframes glowEffect {
		0% {
			background-position: -200px 0;
		}

		100% {
			background-position: 200px 0;
		}
	}



	.subtitle {
		font-size: 48rpx;
		opacity: 0.9;
		margin-top: 20rpx;
	}

	.body {
		margin-bottom: 100rpx;
	}

	.message {
		display: block;
		font-size: 40rpx;
		line-height: 1.6;
		opacity: 0;
		animation: textEntrance 1.5s ease-out forwards;
	}

	.message:nth-child(2) {
		animation-delay: 0.4s;
	}

	.message:nth-child(3) {
		animation-delay: 0.8s;
	}

	.message:nth-child(4) {
		animation-delay: 1.2s;
	}

	.message:nth-child(5) {
		animation-delay: 1.6s;
	}

	.footer {
		margin-top: auto;
	}

	.rsvp-button {
		background: linear-gradient(135deg, #FFA500, #FFD700);
		color: #1A2A4A;
		border: none;
		padding: 15rpx 60rpx;
		font-size: 36rpx;
		border-radius: 60rpx;
		cursor: pointer;
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		/* box-shadow: 0 20rpx 60rpx rgba(41, 112, 255, 0.4); */
	}

	/* 动画定义 */
	@keyframes techPulse {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	@keyframes textEntrance {
		from {
			opacity: 0;
			transform: translateY(40rpx) rotateX(10deg);
		}

		to {
			opacity: 1;
			transform: translateY(0) rotateX(0);
		}
	}

	.rsvp-button:hover {
		transform: translateY(-6rpx) rotateX(2deg);
		/* box-shadow: 0 25rpx 75rpx rgba(41, 112, 255, 0.6); */
	}
</style>